
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-container :style="{'min-height': containerHeight + 'px'}">
            <el-container style="border-top: 1px solid rgb(88, 149, 194)">
                <transition name="el-zoom-in-top">
                    <el-aside>
                        <el-header>
                            <h4 style>用户名列表</h4>
                        </el-header>
                        <el-table
                            ref="singleTable"
                            :data="tableData"
                            highlight-current-row
                            border
                            @current-change="handleCurrentChange"
                            max-height="1200px"
                            style="width: 100%"
                        >
                            <el-table-column type="index" width="50"></el-table-column>
                            <el-table-column property="account" label="用户名" width="249"></el-table-column>
                        </el-table>
                    </el-aside>
                </transition>
                <div class="tree_show"></div>
                <el-main>
                    <el-header>
                        <h4 style>修改</h4>
                    </el-header>
                    <div class="el_form">
                        <el-form
                            :model="formData"
                            :rules="rules"
                            ref="ruleForm"
                            label-width="100px"
                            class="demo-ruleForm"
                        >
                            <el-form-item label="用户名" prop="accId">
                                <el-input v-model="currentRow.account" readonly></el-input>
                            </el-form-item>
                            <el-form-item label="新密码" prop="newPassword">
                                <el-input
                                    type="password"
                                    v-model="formData.newPassword"
                                    :disabled="showPass"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="tPassword">
                                <el-input
                                    type="password"
                                    v-model="formData.tPassword"
                                    :disabled="showPass"
                                ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')" :disabled="showPass">立即修改</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main';
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formData.newPassword) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            containerHeight: '',
            pageTitle: '',
            formData: {
                accId: '', //	账号ID
                newPassword: '', //	新密码
                tPassword: ''
            },
            rules: {
                newPassword: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'change'
                    },
                    {
                        min: 8,
                        max: 30,
                        message: '长度在 8 到 30 个字符',
                        trigger: 'change'
                    },
                    {
                        required: true,
                        pattern: /^(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}$/,
                        message: '您的密码复杂度太低（密码中必须包含字母、数字），请及时修改密码！',
                        trigger: 'change'
                    }
                ],
                tPassword: [{ validator: validatePass, trigger: 'blur' }]
            },
            tableData: [],
            currentRow: {},
            showPass: true
        };
    },
    created() {
        this.getData();
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 160;
        this.pageTitle = this.$router.currentRoute.meta.title;
    },
    methods: {
        getData() {
            appMain
                .accountFindAll({})
                .then(res => {
                    if (res.data.code === 20000) {
                        this.tableData = res.data.data;
                    } else {
                        this.$message.error('服务器繁忙，请稍后再试');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        handleCurrentChange(val) {
            this.currentRow = val;
            this.showPass = false;
            this.formData.accId = this.currentRow.id;
            console.log('handleCurrentChange', val);
        },
        accountModify() {
            let params = this.formData.accId + '/' + this.formData.newPassword;

            appMain
                .accountModify({}, params)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.$message.success(res.data.message);
                        this.resetForm('ruleForm');
                        this.getData();
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    //alert('submit!');
                    this.accountModify();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.currentRow = {};
            this.formData = {
                accId: '', //	账号ID
                newPassword: '', //	新密码
                tPassword: ''
            };
            this.showPass = true;
        }
    }
};
</script>



<style scoped>
.el-header {
    color: #fff;
    background-color: rgb(58, 149, 222);
    height: 35px !important;
    border-radius: 2px;
    text-align: left;
    font-size: 16px;
}

h4 {
    padding-top: 5px;
}

.el-aside {
    background-color: rgb(238, 241, 246);
}

.el-main {
    padding: 0px !important;
    background-color: rgb(238, 241, 246);
}

.tree_show {
    width: 3px;
    background-color: rgb(121, 183, 231);
}

.el-input {
    max-width: 360px;
}

.el_form {
    margin-top: 20px;
}
</style>
